<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/static/images/favicon.ico?v=10">
    <title>登录 | {{ settings.name }}</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
          /*
        body {
            background-image: url('/static/images/bg.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        */

        .login-container {
            background-color: white;
            width: 420px;
            padding: 35px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        .login-container:hover {
            transform: translateY(-5px);
        }
        .login-container h1 {
            color: #2c3e50;
            font-size: 24px;
            text-align: center;
            margin-bottom: 30px;
            position: relative;
        }
        .login-container h1:after {
            content: '';
            display: block;
            width: 50px;
            height: 3px;
            background: linear-gradient(90deg, #4a4a4a 0%, #888888 100%);
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 3px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-weight: 500;
            font-size: 14px;
        }
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        .form-control:focus {
            border-color: #666;
            box-shadow: 0 0 0 3px rgba(102, 102, 102, 0.1);
            outline: none;
        }
        .captcha-group {
            display: flex;
            gap: 12px;
        }
        .captcha-group .form-control {
            flex: 1;
        }
        .captcha-img {
            width: 130px;
            height: 42px;
            border-radius: 6px;
            cursor: pointer;
            transition: transform 0.2s ease;
            object-fit: cover;
        }
        .captcha-img:hover {
            transform: scale(1.02);
        }
        .btn {
            width: 100%;
            padding: 10px;
            background: linear-gradient(135deg, #091f35 0%, #000000 100%);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        .btn:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: all 0.6s ease;
        }
        .btn:hover:before {
            left: 100%;
        }
        .btn:hover {
            box-shadow: 0 5px 15px rgba(51, 51, 51, 0.3);
            background: linear-gradient(135deg, #222222 0%, #555555 100%);
        }
        .footer {
            text-align: center;
            margin-top: 20px;
            font-size: 12px;
            color: #999;
        }
        .login-tips {
            text-align: center;
            margin-top: 15px;
            font-size: 13px;
            color: #666;
        }
        .login-tips a {
            color: #666;
            text-decoration: none;
        }
        .login-tips a:hover {
            text-decoration: underline;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h1>{{ settings.name }}</h1>
        <div>
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" name="username" class="form-control" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" name="password" class="form-control" placeholder="请输入密码">
            </div>
            {% if isEnableLoginCaptcha == 1 %}
                        <div class="form-group">
                            <label for="captcha">验证码</label>
                            <div class="captcha-group">
                                <input type="text" name="captcha" class="form-control" placeholder="请输入验证码">
                                <img id="img_captcha" class="captcha-img" src="/static/images/loading.gif" alt="验证码">
                            </div>
                        </div>
            {% endif %}
            <button type="button" class="btn" onclick="f_login()">登录</button>
            <!--<div class="login-tips">
                <a href="#">忘记密码?</a>
            </div>
            -->
            <div class="footer">©2024-2025</div>
        </div>
    </div>
</body>
<!-- jQuery -->
<script src="/static/lib/jquery/jquery.min.js"></script>
<link href="/static/lib/jquery/toast/1.3.2/jquery.toast.css?v=2" rel="stylesheet">
<script src="/static/lib/jquery/toast/1.3.2/jquery.toast.min.js"></script>
<script src="/static/lib/jquery/toast/1.3.2/toast.js"></script>
<!-- jsencrypt -->
<script src="/static/lib/jsencrypt/3.3.1/jsencrypt.min.js"></script>
<script>
    let public_key = '{{ loginPublicKey }}';
    let isEnableLoginCaptcha = parseInt("{{ isEnableLoginCaptcha }}");
    let eleUsername = $("input[name='username']");
    let elePassword = $("input[name='password']");

    console.log(typeof isEnableLoginCaptcha,isEnableLoginCaptcha)

    function validate_email(val) {
        return val.match(/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/) != null;
    }
    function validate_tel(val) {
        return val.match(/^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/) != null;
    }
    function validate_password(val) {
        return val.match(/^[\w_-]{6,16}$/) != null;
    }
    function f_login() {
        let username = eleUsername.val().trim();
        let password = elePassword.val().trim();

        if(username.length === 0){
            myAlert("请输入用户名","error");
            return false;
        }
        if(username.length < 3){
            myAlert("用户名格式不正确","error");
            return false;
        }
        if(password.length === 0){
            myAlert("请输入密码","error");
            return false;
        }
        if(password.length < 3){
            myAlert("密码格式不正确","error");
            return false;
        }
        let captcha = "";
        if(isEnableLoginCaptcha === 1){
            let eleCaptcha= $("input[name='captcha']");
            captcha = eleCaptcha.val().trim();
            if(captcha.length === 0){
                myAlert("请输入验证码","error");
                return false;
            }
            if(captcha.length < 4){
                myAlert("验证码格式不正确","error");
                return false;
            }
        }

        const encryptor = new JSEncrypt();
        encryptor.setPublicKey(public_key);
        let username_s = encryptor.encrypt(username);
        let password_s = encryptor.encrypt(password);
        $.ajax({
            url: '/login',
            type: "post",
            data: {
                "username_s":username_s,
                "password_s":password_s,
                "captcha":captcha
            },
            dataType: "json",
            timeout: 0,
            error: function () {
                myAlert("网络异常，请确定网络正常！", "error");
            },
            success: function (res) {

                if(1000===res.code){
                    window.location.href = "/";
                }else{
                    myAlert(res.msg,"error",1000);
                }
            }
        });
    }

    document.onkeydown = function (e) { // 回车提交表单
    // 兼容FF和IE和Opera
        let theEvent = window.event || e;
        let code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code === 13) {
            f_login();
        }
    }
    if(isEnableLoginCaptcha === 1){
        let eleImgCaptcha = document.getElementById('img_captcha');
        function f_update_captcha(){
            // 添加时间戳作为参数，确保浏览器重新加载图片
            eleImgCaptcha.src = '/captcha?' + new Date().getTime();
        }
        eleImgCaptcha.addEventListener('click', f_update_captcha);

        window.onload = function (){
            setTimeout(function () {
               f_update_captcha()
            }, 10);
        };
    }
</script>
</html>